{% extends 'template/jhTemplateV4.html'%} {% block vueTemplate %}

<script id="app-template" type="text/html">
	<div>
		<v-app id="inspire" mobile-breakpoint="sm">
			<jh-menu />
			<v-main class="d-flex flex-column" style="margin-top: 60px">
				<!-- 头部内容 >>>>>>>>>>>>> -->
				<div class="pageSecondBar d-flex px-8">
					<v-row>
						<v-col cols="12" xs="12" sm="12" md="4" xl="3">
							<div class="appTitle pt-3" style="font-size: 18px; font-weight: 700">
								{{ breadcrumbs[2].text }}
								<!-- 帮助页按钮 -->
								<v-icon @click="isHelpPageDrawerShow = true" small>mdi-help-circle-outline</v-icon>
							</div>
							<v-breadcrumbs class="pb-3 pt-0 pl-0" :items="breadcrumbs" divider="-"></v-breadcrumbs>
						</v-col>
						<!-- 搜索条件表单 >>>>>>>> -->
						<v-col cols="12" xs="12" sm="12" md="8" xl="9">
							<v-row class="jh-backend-form-container justify-end ma-0 py-1 pb-xs-2">
								<v-col cols="12" xs="6" sm="6" md="4" xl="3" class="pa-xs-0 pb-2 pl-1 pl-xs-1">
									<v-select
										v-model="serverSearchInput.dispatchStatus"
										color="success"
										prefix="申请类型："
										class="jh-v-input bg-white"
										:items="constantObj.dispatchStatus"
										clearable
										dense
										filled
										single-line></v-select>
								</v-col>
								<v-btn
									class="jh-backend-search-btn elevation-0 ml-0 mt-3"
									color="success"
									small
									@click="doUiAction('refreshTableData')">
									查询
								</v-btn>
							</v-row>
						</v-col>
						<!-- <<<<<<<< 搜索条件表单 -->
					</v-row>
				</div>
				<!-- <<<<<<<<<<<<< 头部内容 -->

				<div class="pageBodyContainer px-8" style="flex: 1;">
					<!-- 页面内容 >>>>>>>>>>>>> -->
					<v-container class="fullScreen d-flex flex-column pa-xs-0 pa-0">
						<v-card>
							<v-row
								class="ma-0 pa-xs-4 align-center flex-none pt-0 "
								:class="{'pa-4': !isMobile, 'pb-0': !isMobile, 'pa-2': isMobile}">
								<!-- <v-col cols="12" xs="4" sm="4" md="4" xl="4" class="pl-0">
                  <v-btn color="success" dark class="elevation-0 mr-2" @click="doUiAction('startCreateItem')" small>新增</v-btn>
                </v-col> -->
								<v-spacer></v-spacer>
								<v-col cols="12" xs="3" sm="3" md="2" xl="2" class="pa-xs-0 pa-xs-2 col-sm-8-flex">
									<v-text-field
										v-model="searchInput"
										label="表格过滤"
										class="jh-v-input"
										dense
										filled
										single-line></v-text-field>
								</v-col>
							</v-row>
							<v-data-table
								fixed-header
								:headers="headers"
								:items="tableDataFromBackend"
								:search="searchInput"
								:footer-props="{ itemsPerPageOptions: [20, 40, 60, 100, -1], itemsPerPageText: '每页行数', itemsPerPageAllText: '所有'}"
								:items-per-page="20"
								mobile-breakpoint="0"
								:loading="isTableLoading"
								checkbox-color="success"
								:class="{'zebraLine': showTableZebraLine }"
								class="fixed-table-height elevation-0 mt-0 mb-xs-4 flex-fill d-flex flex-column">
								<template v-slot:item.dispatchDateTime="{ item }">
									{{item.dispatchDateTime | dateFormat }}
								</template>
								<template v-slot:item.operationAt="{ item }">{{item.operationAt | dateFormat }}</template>
								<template v-slot:footer.prepend>
									<span class="ml-2 table-search-hint-text">共{{ tableDataFromBackend.length }}条记录</span>
									<v-menu top offset-y :close-on-content-click="false">
										<template v-slot:activator="{ on, attrs }">
											<v-btn v-bind="attrs" v-on="on" icon>
												<v-icon>mdi-menu</v-icon>
											</v-btn>
										</template>
										<v-list>
											<v-list-item>
												<v-switch v-model="showTableZebraLine" label="显示斑马纹" dense flat></v-switch>
											</v-list-item>
										</v-list>
									</v-menu>
								</template>
								<template v-slot:footer.page-text="pagination">
									<span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
									<span class="ml-1">共{{pagination.itemsLength}}条</span>
								</template>
								<template v-slot:item.filePath="{ item }">
									<v-btn
										v-if="item.filePath"
										color="success"
										outlined
										x-small
										class="elevation-0 mr-2"
										@click="filePreview({item})">
										查看
									</v-btn>
									<a>{{item.filePath}}</a>
								</template>
								<template v-slot:item.action="{ item }">
									<!-- <v-btn
										v-for="tableButton of tableButtonList"
										:color="tableButton.color"
										outlined
										x-small
										class="elevation-0 mr-2"
										@click="doUiAction(tableButton.action, {item, button: tableButton})">
										{{ tableButton.text }}
									</v-btn>
								 -->
								</template>
								<template v-slot:item.filePath="{ item }">
									<v-btn
										v-if="item.filePath"
										color="success"
										outlined
										x-small
										class="elevation-0 mr-2"
										@click="filePreview({item})">
										查看
									</v-btn>
									<!-- <a @click="filePreview({item})">{{item.filePath}}</a> -->
								</template>
							</v-data-table>
						</v-card>
					</v-container>

					<!-- 退车申请抽屉 -->
					<drawer-createTicket
						ref="createDispatchTicket"
						:ticketType="'dispatch'"
						:carId="carId"
						:carNumber="carNumber"></drawer-createTicket>

					<!-- 编辑抽屉 -->
					<v-navigation-drawer
						v-model="isEditDrawerShow"
						:permanent="isEditDrawerShow"
						fixed
						temporary
						right
						width="80%"
						hide-overlay
						class="elevation-24">
						<v-form v-model="isFormValid" ref="form" lazy-validation>
							<v-row class="pt-8">
								<span class="title pa-6" :class="{'pl-12': !isMobile, 'pl-6': isMobile}">
									{{ currentClickButton.title }}文件
								</span>
							</v-row>
							<v-row :class="{'px-10': !isMobile, 'px-3': isMobile, 'pb-7': isMobile}" v-if="isEditDrawerShow">
								<v-col
									v-if="currentClickButton.action === 'edit'"
									cols="12"
									sm="12"
									md="6"
									xl="6"
									:class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">文件</span>
									<v-file-input
										v-model="inputFile"
										class="jh-v-input mr-2"
										dense
										filled
										single-line
										chips
										label="请选择文件"></v-file-input>
								</v-col>

								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">客户ID</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['customerId']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">车辆ID</span>
									<v-select
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['carNumber']"
										:items="carNumberItems"></v-select>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">发车/退车地点</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['dispatchLocation']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">发车/退车时间</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['dispatchDateTime']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">目前公里数</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['currentKilometers']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">验车人</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['inspector']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">车况情况</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['damageRecord']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">车辆发车/退车</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['dispatchStatus']"></v-text-field>
								</v-col>
								<v-col
									cols="12"
									sm="12"
									md="4"
									xl="3"
									:class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
									<span class="inputLabel">发车/退车燃油量(L)</span>
									<v-text-field
										class="jh-v-input "
										dense
										filled
										single-line
										v-model="editItem['dispatchFuel']"></v-text-field>
								</v-col>
							</v-row>
							<!--抽屉操作按钮-->
							<v-row class="mx-0 justify-end mt-4" :class="{'px-4': isMobile, 'px-6': !isMobile, 'mb-8': isMobile}">
								<v-btn color="success" @click="doUiAction(dialogSaveInfoAction)" small>保存</v-btn>
								<v-btn class="elevation-0 ml-2" @click="isEditDrawerShow = false" small>取消</v-btn>
							</v-row>
						</v-form>
						<!--抽屉关闭按钮-->
						<v-btn
							elevation="0"
							color="success"
							fab
							absolute
							top
							left
							small
							tile
							class="drawer-close-float-btn"
							@click="isEditDrawerShow = false">
							<v-icon>mdi-close</v-icon>
						</v-btn>
					</v-navigation-drawer>

					<!-- 遮罩层 -->
					<v-overlay :value="overlay" @click="overlay = false" :opacity="0.85" style="z-index: 9999;">
						<v-icon
							style="position: fixed; right: 30px; top: 30px;"
							large
							color="white"
							@click="overlay = false"
							:color="fileType === 'pdf' ? '#ccc' : ''">
							mdi-close-circle
						</v-icon>
						<v-icon
							style="position: fixed; right: 80px; top: 30px;"
							large
							color="white"
							@click="doUiAction('downloadFileByStream', {item: editItem})"
							:color="fileType === 'pdf' ? '#ccc' : ''">
							mdi-download
						</v-icon>
						<iframe
							v-if="fileType === 'pdf'"
							id="pdfPlayer"
							:src="fileSrc"
							frameborder="0"
							style="width: 100vw; height: 100vh; padding: 50px 0 0 0;"></iframe>
						<v-img v-else max-height="800" max-width="800" :src="fileSrc"></v-img>
					</v-overlay>
					<!-- <<<<<<<<<<<<< 页面内容 -->
				</div>

				<!-- 帮助页抽屉 >>>>>>>>>>>>> -->
				<v-navigation-drawer v-model="isHelpPageDrawerShow" fixed temporary right width="80%" class="elevation-24">
					<iframe
						style="border: 0"
						:src="`/${appInfo.appId}/pageDoc?markdownPath#1.studentFileManagement.md`"
						width="100%"
						height="100%"></iframe>
					<v-btn
						elevation="0"
						color="success"
						fab
						absolute
						top
						left
						small
						tile
						class="drawer-close-float-btn"
						@click="isHelpPageDrawerShow = false">
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-navigation-drawer>
				<!-- <<<<<<<<<<<<< 帮助页抽屉 -->
			</v-main>
		</v-app>

		<jh-toast />
		<jh-mask />
		<jh-confirm-dialog />
	</div>
</script>

<div id="app"></div>

{% endblock %} {% block vueScript %}

<!-- 加载页面组件 >>>>>>>>>>>>> -->
{% include 'filter/vueFilters.html' %} {% include 'common/jianghuJs/fixedTableHeightV4.html' %} {% include
'component/drawer/drawer-createTicket.html'%}
<!-- <<<<<<<<<<<<< 加载页面组件 -->
<script type="module">
	new Vue({
		el: "#app",
		template: "#app-template",
		vuetify: new Vuetify(),
		data: () => ({
			// 下拉框选择车牌号
			carNumberItems: [],
			// 退车抽屉
			carId: "",
			carNumber: "",
			isDispatchDrawerShow: false,
			dispatchActionData: {
				ticketType: "退车申请",
				ticketContentRequest: [],
			},
			// 下拉筛选
			constantObj: {
				dispatchStatus: [
					{ text: "全部", value: null },
					{ text: "发车", value: "发车" },
					{ text: "退车", value: "退车" },
				],
			},
			serverSearchInput: {
				dispatchStatus: "发车",
			},
			// 面包屑
			breadcrumbs: [
				{
					text: "首页",
					disabled: true,
				},
				{
					text: "车库管理",
					disabled: true,
				},
				{
					text: "发车/收车",
					disabled: true,
				},
			],
			isHelpPageDrawerShow: false,
			// 表格相关数据
			isTableZebraLineShown: true,
			showTableZebraLine: true,
			isFormValid: true,
			requireRules: [v => !!v || "This is required"],
			isEditDrawerShow: false,
			searchInput: null,
			isTableLoading: true,
			tableDataFromBackend: [],
			headers: [
				{
					text: "操作",
					value: "action",
					align: "center",
					sortable: false,
					width: 120,
					class: "fixed",
					cellClass: "fixed",
				},
				{ text: "验车照片", value: "filePath", width: 100 },
				{ text: "车单ID", value: "dispatchId", width: 120 },
				{ text: "合同Id", value: "contractId", width: 120 },
				{ text: "车辆编号", value: "carId", width: 120 },
				{ text: "车牌号", value: "carNumber", width: 120 },
				{ text: "发车/退车地点", value: "dispatchLocation", width: 120 },
				{ text: "发车/退车时间", value: "dispatchDateTime", width: 120 },
				{ text: "目前公里数", value: "currentKilometers", width: 120 },
				// { text: "验车照片", value: "carInspectionPhoto", width: 120 },
				{ text: "验车人", value: "inspector", width: 120 },
				// { text: "车况情况", value: "damageRecord", width: 120 },

				{ text: "目前燃油量(L)", value: "dispatchFuel", width: 120 },
				{ text: "车辆发车/退车", value: "dispatchStatus", width: 120 },
				{ text: "操作人", value: "operationByUser", width: 120 },
				{ text: "操作时间", value: "operationAt", width: 250 },
			],
			tableButtonList: [
				// { text: '修改', buttonType: 'edit', color: 'success', action: 'startUpdateItem' },
				// { text: '删除', buttonType: 'delete', color: 'error', action: 'deleteItem' },
			],
			currentClickButton: { title: "新增", action: "add" },
			editItem: {},
			// 文件上传
			inputFile: null,
			downloadPrefix: `${window.location.origin}/<$ ctx.app.config.appId $>/upload`,
			dialogSaveInfoAction: "",
			overlay: false,
			fileType: "",
			fileSrc: "",
			previewPrefix: `/<$ ctx.app.config.appId $>/upload`,
		}),
		computed: {
			isMobile() {
				return window.innerWidth < 600;
			},
			tableData() {
				return this.tableDataFromBackend;
			},
		},
		watch: {},
		async created() {},
		mounted() {
			this.doUiAction("refreshTableData");
			this.doUiAction("getCarNumber");
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "getCarNumber":
						await this.getCarNumber();
						break;
					case "startReturnDispatchCar":
						await this.prepareReturnDispatchActionData(uiActionData);
						await this.openDispatchDrawer();
						break;
					case "returnDispatchCar":
						await this.confirmCreateItemDialog(uiActionData);
						// 实际上为发送一张工单
						await this.doReturnDispatchCar();
						await this.closeDispatchDrawer();
						break;
					case "refreshTableData":
						await this.refreshTableData(uiActionData);
						break;
					case "startCreateItem":
						await this.clearItemData(uiActionData);
						await this.openCreateItemDialog(uiActionData);
						break;
					case "createItem":
						await this.prepareValidate(uiActionData);
						await this.confirmCreateItemDialog();
						await this.doCreateItem(uiActionData);
						await this.refreshTableData(uiActionData);
						await this.closeDrawerShow(uiActionData);
						break;
					case "startUpdateItem":
						await this.prepareItemData(uiActionData);
						await this.openUpdateItemDialog(uiActionData);
						break;
					case "updateItem":
						await this.prepareValidate(uiActionData);
						await this.confirmUpdateItemDialog();
						await this.doUpdateItem(uiActionData);
						await this.refreshTableData(uiActionData);
						await this.closeDrawerShow(uiActionData);
						break;
					case "deleteItem":
						await this.confirmDeleteItemDialog(uiActionData);
						await this.prepareItemData(uiActionData);
						await this.doDeleteItem(uiActionData);
						await this.refreshTableData(uiActionData);
						break;
					case "downloadFileByStream":
						await this.downloadFileByStream(uiActionData);
						break;
					case "downloadFileByStream":
						await this.downloadFileByStream(uiActionData);
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			async closeDispatchDrawer() {
				this.isDispatchDrawerShow = false;
			},
			async doReturnDispatchCar() {
				await window.jhMask.show();
				await window.vtoast.loading("退车申请中");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "ticketManagement",
							actionId: "insertItem",
							actionData: this.dispatchActionData,
							idGenerate: {
								type: "idSequence",
								prefix: "GD",
								bizId: "ticketId",
								tableName: "ticket",
							},
						},
					},
				});
				// 关闭抽屉
				this.isRequestDrawerShown = false;
				await window.jhMask.hide();
				await window.vtoast.success("退车申请成功");
			},
			async getCarNumber() {
				let arr = [];
				const rows = (
					await window.jianghuAxios({
						data: {
							appData: {
								pageId: "basicManagement",
								actionId: "selectItemList",
								where: { operationStatus: "可用" },
							},
						},
					})
				).data.appData.resultData.rows;
				for (let row of rows) {
					arr.push(row.carNumber);
				}
				this.carNumberItems = arr;
			},
			async prepareReturnDispatchActionData(uiActionData) {
				const obj = _.cloneDeep(uiActionData);
				const { contractId = ticketBizId, carId, carNumber } = obj;
				this.carId = carId;
				this.carNumber = carNumber;
				this.dispatchActionData.contractId = contractId;
			},
			async openDispatchDrawer() {
				await this.$refs.createDispatchTicket.doUiAction("open", this.dispatchActionData);
			},
			/**
			 * 获取表格数据
			 */
			async refreshTableData() {
				const backendSearchData = _.pickBy(this.serverSearchInput, (fieldValue, fieldKey) => {
					if (fieldValue !== null && fieldValue !== "") {
						return true;
					}
				});
				this.isTableLoading = true;
				// 获取车辆基本信息表中运营状态和出租状态都为true的项
				const result = await window.jianghuAxios({
					data: {
						appData: {
							pageId: "carDispatchManagement",
							actionId: "selectItemList",
							orderBy: [{ column: "operationAt", order: "desc" }],
							where: backendSearchData,
						},
					},
				});

				this.tableDataFromBackend = result.data.appData.resultData.rows;
				this.isTableLoading = false;
			},

			// startCreateItem
			async clearItemData() {
				this.editItem = {};
				this.inputFile = null;
			},

			async openCreateItemDialog() {
				this.currentClickButton = { action: "add", title: "新增" };
				this.isEditDrawerShow = true;
				this.dialogSaveInfoAction = "createItem";
			},

			// 表单验证
			async prepareValidate() {
				if ((await this.$refs.form.validate()) === false) {
					throw new Error("[prepareValidate] false");
				}
			},

			// createItem
			async confirmCreateItemDialog() {
				if ((await window.confirmDialog({ title: "新增", content: "确定新增吗？" })) === false) {
					throw new Error("[confirmCreateFormDialog] 否");
				}
			},

			/**
			 * 新增数据
			 */
			async doCreateItem() {
				const { id, ...createData } = this.editItem;
				await window.vtoast.loading("保存中");
				const fileDesc = this.editItem.fileDesc;
				const file = this.inputFile;
				window.vtoast.loading(`${file.name} 上传进度: 0.00%`);
				const result = await window.jianghuAxios.httpUploadByStream({
					fileDesc,
					file,
					fileDirectory: "testFile",
					onProgress: (total, loaded) => {
						const progress = Number(((loaded * 100) / total).toFixed(2));
						window.vtoast.loading(`${file.name} 上传进度: ${progress}%`);
						if (loaded === total) {
							window.vtoast.success(`${file.name} 上传进度: 100%`);
						}
					},
				});
				const { status } = result.data;
				const { downloadPath } = result.data.appData.resultData;
				if (status === "success") {
					await window.jianghuAxios({
						data: {
							appData: {
								pageId: "carDispatchManagement",
								actionId: "insertItem",
								actionData: { ...createData, filePath: downloadPath },
							},
						},
					});
					await window.vtoast.success("新增数据成功");
				} else {
					await window.vtoast.fail("文件上传失败");
				}
			},

			async downloadFileByStream({ item }) {
				const downloadPath = item.filePath;
				const filename = item.filename || downloadPath.split("/").pop();
				window.vtoast.loading(`${filename} 下载进度: 0%`);
				const buffer = await window.jianghuAxios.httpDownloadByStream({
					downloadPath,
					filename,
					onProgress: (total, loaded) => {
						const progress = Number(((loaded * 100) / total).toFixed(2));
						window.vtoast.loading(`${filename} 下载进度: ${progress}%`);
						if (total === loaded) {
							window.vtoast.success("下载完成");
						}
					},
				});
				window.jianghuAxios.downloadBufferToChrome({ buffer, filename });
			},
			filePreview({ item }) {
				this.editItem = item;
				if (!item.filePath) return;
				const fileType = item.filePath.split(".");
				if (/\.(pdf|PDF)$/.test(item.filePath)) {
					this.fileType = "pdf";
					this.fileSrc =
						"/<$ ctx.app.config.appId $>/public/plugin/pdf/web/viewer.html?file=" +
						encodeURIComponent(this.previewPrefix + item.filePath);
					this.overlay = true;
				}
				if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.filePath)) {
					this.fileType = "img";
					this.fileSrc = this.previewPrefix + item.filePath;
				}
				console.log(this.fileSrc);
				this.overlay = true;
			},

			// startUpdateItem
			async prepareItemData({ item }) {
				this.editItem = { ...item };
			},

			async openUpdateItemDialog() {
				this.currentClickButton = { action: "edit", title: "修改" };
				this.isEditDrawerShow = true;
				this.dialogSaveInfoAction = "updateItem";
			},

			// updateItem
			async confirmUpdateItemDialog() {
				if ((await window.confirmDialog({ title: "修改", content: "确定修改吗？" })) === false) {
					throw new Error("[confirmUpdateItemDialog] 否");
				}
			},

			/**
			 * 保存学生
			 */
			async doUpdateItem() {
				await window.vtoast.loading("保存中");
				const { id, ...data } = this.editItem;
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "carDispatchManagement",
							actionId: "updateItem",
							actionData: data,
							where: { id },
						},
					},
				});
				await window.vtoast.success("修改成功");
			},

			// 关闭抽屉
			async closeDrawerShow() {
				this.isEditDrawerShow = false;
			},

			// deleteItem
			async confirmDeleteItemDialog() {
				if ((await window.confirmDialog({ title: "删除", content: "确定删除吗？" })) === false) {
					throw new Error("[confirmDeleteItemDialog] 否");
				}
			},

			/**
			 * 删除数据
			 */
			// TODO::只是删除了 _file表中的数据，并没有删除文件
			async doDeleteItem() {
				const { id } = this.editItem;
				window.vtoast.loading("正在删除");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "carDispatchManagement",
							actionId: "deleteItem",
							where: { id },
						},
					},
				});
				window.vtoast.success("删除成功");
			},

			/**
			 * 文件stream下载
			 */
			// TODO::下载未成功时无错误响应
			async downloadFileByStream({ item }) {
				const downloadPath = item.filePath;
				const filename = item.filename || downloadPath.split("/").pop();
				window.vtoast.loading(`${filename} 下载进度: 0%`);
				const buffer = await window.jianghuAxios.httpDownloadByStream({
					downloadPath,
					filename,
					onProgress: (total, loaded) => {
						const progress = Number(((loaded * 100) / total).toFixed(2));
						window.vtoast.loading(`${filename} 下载进度: ${progress}%`);
						if (total === loaded) {
							window.vtoast.success("下载完成");
						}
					},
				});
				window.jianghuAxios.downloadBufferToChrome({ buffer, filename });
			},
			filePreview({ item }) {
				this.editItem = item;
				if (!item.filePath) return;
				const fileType = item.filePath.split(".");
				if (/\.(pdf|PDF)$/.test(item.filePath)) {
					this.fileType = "pdf";
					this.fileSrc =
						"/<$ ctx.app.config.appId $>/public/plugin/pdf/web/viewer.html?file=" +
						encodeURIComponent(this.previewPrefix + item.filePath);
					this.overlay = true;
				}
				if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(item.filePath)) {
					this.fileType = "img";
					this.fileSrc = this.previewPrefix + item.filePath;
				}
				console.log(this.fileSrc);
				this.overlay = true;
			},
		},
	});
</script>

{% endblock %}
